<template>
    <div class="header">
        <div class="left">
            <img src="../assets/logo.png" class="image" alt="">
            <p class="logop">&nbsp;&nbsp;诺贝尔自然科学奖知识库</p>
        </div>
        <div class="center">
            <!-- <ul>
                <li :class="{ active: active == item.name }" v-for="(item, index) in navarList" :key="item.name"
                    @click="redirect(item, index)">{{ item.name }}</li>
            </ul> -->

            <el-menu router :default-active="this.$router.path" class="el-menu-demo" mode="horizontal"
                @select="handleSelect">
                <el-menu-item index="/">首页</el-menu-item>
                <el-submenu index="2">
                    <template slot="title">奖项</template>
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
                    <el-menu-item index="2-3">选项3</el-menu-item>
                </el-submenu>
                <el-menu-item index="/scholar">学者</el-menu-item>
                <el-menu-item index="4">文献库</el-menu-item>
                <el-menu-item index="5">关于我们</el-menu-item>

            </el-menu>

        </div>
        <div class="right">
            <input type="text" class="ipt" placeholder="请输入您想查询内容">
            <svg t="1681888467506" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="2693" width="16" height="16">
                <path
                    d="M934.966272 879.950848 709.541888 654.526464c47.665152-59.81696 76.166144-135.581696 76.166144-218.012672 0-193.36704-156.752896-350.124032-350.12096-350.124032S85.464064 243.145728 85.464064 436.513792s156.756992 350.124032 350.124032 350.124032c79.875072 0 153.486336-26.766336 212.39808-71.79264l226.04288 226.04288c8.416256 8.416256 19.441664 12.62592 30.470144 12.62592 11.025408 0 22.050816-4.209664 30.466048-12.62592C951.798784 924.055552 951.798784 896.782336 934.966272 879.950848zM165.953536 436.513792c0-148.912128 120.722432-269.630464 269.63456-269.630464S705.21856 287.60064 705.21856 436.513792 584.500224 706.148352 435.588096 706.148352 165.953536 585.42592 165.953536 436.513792z"
                    fill="#3E5215" p-id="2694"></path>
                <path
                    d="M291.135488 302.036992c-8.997888-4.864-20.23424-1.511424-25.097216 7.486464-20.256768 37.476352-32.600064 78.152704-36.688896 120.899584-0.973824 10.181632 6.491136 19.224576 16.672768 20.1984 0.59904 0.057344 1.195008 0.084992 1.784832 0.084992 9.433088 0 17.497088-7.175168 18.413568-16.75776 3.613696-37.7856 14.5152-73.72288 32.401408-106.814464C303.485952 318.138368 300.1344 306.900992 291.135488 302.036992z"
                    fill="#3E5215" p-id="2695"></path>
            </svg>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Navigation',
    props: {
        msg: String
    },
    data () {
        return {
            path: "",
            navarList: [
                { name: "首页", path: "/" },
                { name: "奖项", path: "/awards", },
                { name: "学者", path: "/researchManager", },
                { name: "文献库", path: "/Manager" },
                { name: "关于我们", path: "/Manager" },
            ],
            active: '',
            activeIndex: '1',
            activeIndex2: '1',
        }
    },
    created () {
        this.path = this.$route.path
        this.active = this.$route.name
        // console.log(this.$route);
        // console.log(this.active);
    },
    methods: {
        redirect (item, index) {
            this.active = item.name;
            console.log(this.active);
            if (this.$route.path != item.path) {
                this.$router.push({ path: `${item.path}`, query: { id: '' } })
            }
        },
        handleSelect (key, keyPath) {
            console.log(key, keyPath);
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
* {
    margin: 0;
    padding: 0;
}

.header {
    // width: 1200px;
    height: 100%;
    // padding: 0 10%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.left {
    display: flex;
}

.image {
    width: 40px;
    height: 40px;
}

.center {
    display: flex;
    width: 50%;
}

.center ul {
    width: 100%;
    justify-content: space-evenly;
    display: flex;
}

.center ul li {
    cursor: pointer;
    font-size: 16px;
    color: #666666;
    font-weight: 400;
    font-family: Microsoft YaHei;
}

.ipt {
    background: #E8E8E8;
    border-radius: 8px;
    width: 210px;
    height: 38px;
    padding: 0 10px;
    border: 0;
    outline: none;
}

.icon {
    position: absolute;
    right: 14px;
    top: 10px;
}

.right {
    position: relative;
}

.active {
    color: #3E5215 !important;
    font-size: 18px !important;
    font-weight: bold !important;
}

.logop {
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #000000;
    line-height: 36px;
}

.el-menu--horizontal>.el-menu-item.is-active {
    color: #3E5215;
    font-size: 18px;
    font-weight: bold;
    border: 0;
    text-decoration: none;
}

.el-menu--horizontal>.el-menu-item {
    border-bottom: none;
}
</style>
